<template>
  <div class="main">
    <p class="location">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><i class="el-icon-location-outline" /> &nbsp;&nbsp;&nbsp;当前位置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/aggregation/contract-guard' }">劳动合同卫士</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/aggregation/contract-guard' }">律师审查</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/aggregation/laborcontract' }">发起审查</el-breadcrumb-item>
      </el-breadcrumb>
    </p>
    <div class="serch">
      <span>文件名称： </span>
      <el-input v-model="fileName" placeholder="请输入内容" />
      <span style="margin-left:100px">律师名称： </span>
      <el-input v-model="lawyerName" placeholder="请输入内容" />
      <el-button type="danger" round style="margin-left:100px">搜索</el-button>
    </div>
    <div class="tables">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="file" label="审核及交付文件" align="center">
          <template slot-scope="scope">
            <span class="file-img"><img src="../../assets/contract/icon_hetong2.png" alt=""></span><span class="file-name">{{ scope.row.file }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="审核律师" align="center" />
        <el-table-column prop="time" label="发起时间" align="center" />
        <el-table-column prop="biaoqian" label="标签" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.biaoqian === '1'">加急</span>
            <span v-if="scope.row.biaoqian === '2'">7天</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === '1'" class="audit"><a class="ing">审核中</a><a>离审核结束还剩：2天8小时20秒</a></span>
            <span v-if="scope.row.status === '2'" class="audit"><a class="end">审核已完成</a><a>用时：2天8小时20秒</a></span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template>
            <span class="handle" @click="remind()"><img src="../../assets/contract/icon_shenghe.png" alt="">提醒审核</span>
            <span class="handle" @click="subscribe()"><img src="../../assets/contract/icon_xiezuo.png" alt="">预约协作</span>
            <span class="handle" @click="telephone()"><img src="../../assets/contract/icon_tel.png" alt="">电话沟通</span>
            <span class="handle" @click="otherConsult()"><img src="../../assets/contract/icon_zixun.png" alt="">其他咨询</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="更多" align="center">
          <template>
            <span class="more"><img src="../../assets/contract/icon_zhuanru.png" alt=""></span>
            <span class="more"><img src="../../assets/contract/icon_del2.png" alt=""></span>
            <span class="more"><img src="../../assets/contract/icon_upload.png" alt=""></span>
            <span class="more"><img src="../../assets/contract/icon_zhuanfa.png" alt=""></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 电话沟通弹窗 -->
    <div class="dialog-signed">
      <el-dialog :visible.sync="isPhone" width="610px" top="30vh" title="电话沟通" center>
        <div class="dia-main">
          <p>您的姓名：<el-input v-model="name" placeholder="请输入您的姓名" /></p>
          <p>联系电话：<el-input v-model="telNum" placeholder="请输入联系电话" /></p>
          <div style="font-size:12px;text-align:center;padding-left:40px;">我们的专业顾问将会在1个工作日内与您联系，请保持电话沟通</div>
          <p class="footer" style="padding:20px 0 0 30px">
            <el-button type="warning" style="margin-right:30px" @click="confirm()">确定</el-button>
            <el-button @click="isPhone = false">取消</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
    <!-- 其他咨询弹窗 -->
    <div class="dialog-signed consult">
      <el-dialog :visible.sync="isConsult" width="610px" top="15vh" title="咨询信息" center>
        <div class="dia-main">
          <p>咨询主题：<el-input v-model="theme" placeholder="请输入内容" /></p>
          <p><a style="float:left">咨询内容：</a><el-input v-model="matter" type="textarea" :autosize="{ minRows: 15, maxRows: 15}" placeholder="请输入内容" /></p>
          <div style="font-size:12px;text-align:center;padding-left:40px;">我们的专业顾问将会在1个工作日内与您联系，请保持电话沟通</div>
          <p class="footer" style="padding:20px 0 0 30px">
            <el-button type="warning" style="margin-right:30px" @click="sure()">确定</el-button>
            <el-button @click="isConsult = false">取消</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
    <!-- 预约协作弹窗 -->
    <div class="dialog-signed consult">
      <el-dialog :visible.sync="isOrder" width="850px" top="15vh" title="预约协作" center>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="first"><span slot="label" class="slots"><a>今天</a><a>2021-7-9</a></span>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>09:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>10:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>11:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>13:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>14:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>15:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>16:00</p>
              <p>可预约</p>
            </div>
            <div class="time">
              <p><img src="../../assets/contract/icon_time_gray.png" alt=""></p>
              <p>17:00</p>
              <p>可预约</p>
            </div>
            <p class="footer" style="padding:20px 0 0 30px">
              <el-button type="warning" style="margin-right:30px" @click="fine()">确定</el-button>
              <el-button @click="isOrder = false">取消</el-button>
            </p>
          </el-tab-pane>
          <el-tab-pane name="second"><span slot="label" class="slots"><a>周一</a><a>2021-7-12</a></span></el-tab-pane>
          <el-tab-pane name="third"><span slot="label" class="slots"><a>周二</a><a>2021-7-13</a></span></el-tab-pane>
          <el-tab-pane name="fourth"><span slot="label" class="slots"><a>周三</a><a>2021-7-14</a></span></el-tab-pane>
          <el-tab-pane name="five"><span slot="label" class="slots"><a>周四</a><a>2021-7-15</a></span></el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: '',
      textarea: '',
      telNum: '',
      matter: '',
      name: '',
      fileName: '',
      lawyerName: '',
      tableData: [{
        name: 'jimy',
        file: 'hhfid',
        time: '2021-999',
        biaoqian: '1',
        status: '2'
      }, {
        name: 'jimy2',
        file: 'hhfid2',
        time: '2021-9992',
        biaoqian: '2',
        status: '1'
      }],
      isPhone: false,
      isConsult: false,
      isOrder: false,
      activeName: 'first'
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
    },
    remind() {
      this.$message.success({
        message: '提醒已发送，系统会尽快处理',
        offset: 400
      })
    },
    telephone() {
      this.isPhone = true
    },
    confirm() {
      this.isPhone = false
    },
    otherConsult() {
      this.isConsult = true
    },
    sure() {
      this.isConsult = false
    },
    subscribe() {
      this.isOrder = true
    },
    fine() {
      this.isOrder = false
    },
    handleClick() {
      console.log(111)
    }
  }
}
</script>

<style scoped>
.serch{
  height:90px;
  background:#fff;
  line-height: 90px;
  padding-left:40px;
}
.main /deep/.el-button--danger{
  border-radius:30px !important;
}
.main /deep/.el-input{
  width:350px !important;
}
.file-img{
  display:inline-block;
  width:40px;
  height:45px;
}
.file-img>img{
  width:100%;
  height:100%;
}
.file-name{
  display:inherit;
}
.audit>a{
  display:block;
}
.audit>a{
  height:30px;
}
.audit>.ing{
  color:#1CB531;
}
.audit>.end{
  color:#FD8F00;
}
.handle{
  display:inline-block;
  width:50%;
  float:left;
  cursor: pointer;
}
.handle>img{
  margin-right:10px;
}
.more{
  margin-right:10px;
}
.dialog-signed /deep/.el-dialog{
  height:370px;
  border-radius:10px;
}
.dialog-signed /deep/.el-dialog__header{
  padding:10px;
  background:#eee;
  border-radius:10px 10px 0 0;
}
.main /deep/.el-dialog__close{
  display:none;
}
.main /deep/.el-input {
  width:300px;
}
.dia-top{
  overflow: hidden;
  line-height: 36px;
  margin-bottom:30px;
}
.dia-top>span{
  margin:0 10px;
}
.dia-top>span>a{
  margin-left:5px;
}
.dia-top>a{
  float:right;
}
.main /deep/.el-input--medium .el-input__inner{
  border-radius:0;
}
.main /deep/.el-button--danger{
  width:100px;
  border-radius:0 5px 5px 0;
  background:#DF090D;
}
.main /deep/.dialog-footer{
  text-align: center;
  margin-top:30px;
}
.page{
  text-align: center;
  margin-top:30px;
  height:30px;
}
.main /deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background:#E21111;
}
.main /deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color:#E21111;
}
.main /deep/.el-dialog__title{
  font-size:16px;
}
.main /deep/.el-table th{
  background:#F7F7F7;
}
.main /deep/.el-table th.is-leaf{
  border:none;
}
.main /deep/.el-table thead{
  color:#666;
}
.main /deep/.el-button--primary{
  border-color: #E21111;
}
.main /deep/.el-button--default{
  background:none;
}
.dia-main>p{
  padding-left:60px;
  margin-top:30px;
}
.footer{
  text-align: center;
}
.main /deep/.el-button{
  border-radius:20px;
}
.consult /deep/.el-dialog{
  height:640px;
}
/deep/.el-textarea{
  width:350px;
}
.slots{
  display:inline-block;
}
.slots>a{
  display: block;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
/deep/.el-tabs__item{
  padding:0 37px !important;
}
.time{
  display:inline-block;
  width:160px;
  height:145px;
  background:#fff;
  border-radius: 5px;
	box-shadow: -2px 0px 5px 1px #ddd,0px -2px 5px 1px #ddd,2px 0px 5px 1px #ddd,0px 2px 5px 1px #ddd;
  margin:20px;
  padding-top:20px;
}
.time>p{
  text-align: center;
}
</style>
